<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/tt.css">
    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css"/>
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/page-sj-spit-index.css"/>

    <title>自我测试</title>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="./js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/qs.js"></script>

</head>
<body>

<div id="app">
    <div style="height:100px;background-color:black;color:white;text-align:center;font-size:35px">
        开&nbsp;&nbsp;&nbsp; 始&nbsp;&nbsp;&nbsp; 答&nbsp;&nbsp;&nbsp; 题
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="wrapper tag-item">
            <div class="fl left-list">
                <div class="tc-data-list">
                    <div class="tc-list">
                        <ul class="detail-list" v-for="question in questions">
                            <li class="qa-item">
                                <div class="fl record">
                                    <div class="number">
                                        <div class="border answer">
                                            <p class="usenum"></p>
                                            <p class="zannum"><strong> 题干</strong></p>
                                        </div>
                                        <hr/>
                                        <div class="border answer">
                                            <p class="zannum"><strong>选项</strong></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="info">
                                    <p class="text">
                                        <b>{{question.subject}}</b>
                                    </p>
                                    <div class="other">
                                        <div class="fl date">
                                        <span>
                                            <el-form-item label="单选题" v-if="question.type == 1">
                                                <el-radio-group v-model="question.id">
                                                    <el-radio v-for="(item,index) in question.questionItemList"
                                                              :key="item.id"
                                                              :label="item.content"
                                                              :name="question.id"
                                                              v-model="checked"
                                                              @change="changeResultRadio(item)">
                                                    </el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="多选题" v-if="question.type == 2">
                                                 <el-checkbox v-for="(item,index) in question.questionItemList"
                                                              :key="item.id"
                                                              :label="item.content"
                                                              :name="question.id"
                                                              v-model="checked"
                                                              @change="changeResultCheckBox(item)">
                                                 </el-checkbox>
                                            </el-form-item>
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </li>
                        </ul>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">交卷</el-button>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </div>
    </el-form>
</div>

</body>
</html>
<script>
    /* 脚本中创建对象,处理业务 */
    new Vue({
        el: '#app',
        data: {
            questions:[],
            results:[],
            checked:[],
        },
        methods: {
            /*-------------------------单选多选题处理结构    开始-------------------------
                //1.分情况处理，单选题与多选题处理方式不同
                //2.约定回传的答案格式       单选题由题号与选项组成，多选题由题号和多个选项组成
                {
                    questionId:XXXXXXXX,
                    answer:mm
                }
                {
                    questionId:XXXXXXXX,
                    answer:mm,nn
                }
                //3.无论是单选还是多选，最终都是将所有题目的答案结果放置在一个数据中保存（results），整体操作就是为results添加/修改数据
                [{},{},{}]
                //4.操作模式
                每次操作一个题目，先将当前题目对应的questionId在原始results中删除，添加新数据到results中
                [1,1,1]
                单选：加入一个数据，如果之前有这个题目的数据，先删除再添加
                多选：加入一个数据，如果之前有这个题目的数据，先删除再添加
                -------------------------单选多选题处理结构    结束-------------------------*/

            changeResultRadio(item){
                //输出选中信息
                // alert("当前选项所属题目id："+item.questionId);
                // alert('当前选项id：'+item.id);
                // alert("本次操作前数据结果：" + JSON.stringify(this.results))

                //组织数据（要加入到results中的数据）
                var temp = {"questionId":item.questionId,"answer":item.id};
                //alert(JSON.stringify(temp))

                //删除当前results中已经存在的本题目对应的数据
                this.results = this.results.filter(e=>{return e.questionId !== item.questionId})
                //alert("results[操作前]：" + JSON.stringify(this.results))

                //将本次操作的结果加入到results
                this.results.push(temp);
                //alert("results[操作后]：" + JSON.stringify(this.results))
            },

            changeResultCheckBox(item){
                /*
                var s = '11,22,33,44';
                x = '33'
                var arr = s.split(",");
                var index = arr.indexOf(x);
                arr.splice(index,1);
                s = arr.join(",");
                alert(s)
                */

                //输出选中信息
                // alert("当前选项所属题目id："+item.questionId);
                // alert("当前选项id："+item.id);
                // alert('当前'+ this.checked);
                // alert("本次操作前数据结果：" + JSON.stringify(this.results))

                var temp = this.results.find(e=>{return e.questionId === item.questionId})

                if(temp == undefined){
                    //当前题目从来未作答过
                    temp = {"questionId":item.questionId,"answer":item.id};
                }else{
                    if(this.checked){
                        // 添加该答案
                        temp.answer = temp.answer + "," + item.id;
                    }else{
                        //删除该答案
                        var arr = temp.answer.split(",");
                        var index = arr.indexOf(item.id);
                        arr.splice(index,1);
                        temp.answer = arr.join(",");
                    }
                }

                //组织数据（要加入到results中的数据）
                // var temp = {"questionId":item.questionId,"answer":item.id};
                // alert(JSON.stringify(temp))

                //删除当前results中已经存在的本题目对应的数据
                this.results = this.results.filter(e=>{return e.questionId !== item.questionId})
                //alert("results[操作前]：" + JSON.stringify(this.results))

                //将本次操作的结果加入到results
                this.results.push(temp);
                //alert("results[操作后]：" + JSON.stringify(this.results))

            },
            submitForm(formName) {
                console.log(this.results);
                if(this.results.length != this.questions.length){
                    alert("请检查题目是否全部选择");
                    return;
                }else{
                    if(window.confirm("确定交卷吗？")) {
                        //把json数据转成字符串
                        var str = JSON.stringify(this.results);
                        //获取localSotrage
                        var storage = window.localStorage;
                        //发送请求，交卷

                        axios.post('/exam/applyPaper',Qs.stringify({
                            memberId:storage.id,
                            results:str,
                            createTime:window.localStorage.getItem("createTime")
                        })).then(function (response) {
                            //输出提示信息
                            //alert(response.data.message);
                            alert(response.data.data.score);
                            //发送完请求，跳转到交卷成功页面
                            window.open('/index.html', '_self');

                        }).catch(function (err) {
                            console.log(err)
                        });
                    }
                }
            },
            findQuestion(){
                var _this = this;
                //4.发送post请求，获取题目信息
                axios.post('/exam/getPaper').then(function (response) {
                    //5.得到响应数据
                    var res = response.data;
                    //alert(JSON.stringify(res));
                    _this.questions = res.data;
                }).catch(function (err) {
                    console.log(err)
                });
            }
        },
        created(){
            window.localStorage.setItem("createTime",Date.now());
            this.findQuestion();
        },
    });

</script>





